<template>
  <FullModal v-model:modelValue="modalVisible">
    <template #title>
      <div class="title-wrapper">
        <span>代码预览</span>
        <a-button type="link" @click="handelDownload">代码下载</a-button>
      </div>
    </template>
    <CodeEditor v-model:code="codeStr" />
  </FullModal>
</template>

<script setup lang="jsx">
import { computed } from "vue";
import FullModal from "@/components/FullModal/index.vue";
import CodeEditor from "@/components/CodeEditor/index.vue";
import { downloadCode } from "@/utils/index";

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  codeObj: { type: Object, default: () => ({}) },
});

const emits = defineEmits(["update:modelValue"]);

const modalVisible = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    return emits("update:modelValue", val);
  },
});
const codeStr = computed(() => props.codeObj["App.vue"]);

function handelDownload() {
  downloadCode(codeStr.value, "List.vue");
}
</script>

<style lang="less" scoped>
.title-wrapper {
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .ant-btn {
    font-size: 15px;
  }
}
</style>
